<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRUD</title>
    <script src="axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }
         .bigbox {
            width: 700px;
            min-height: 90px;
        }

        p {
            padding: 5px 0;
        }

        .header {
            width: 700px;
            height: 40px;
            line-height: 1;
            margin-top: 8px;
            border-top: 1px solid #000;
            border-bottom: 1px solid #000;
        }

        .header span {
            display: inline-block;
            width: 139px;
            height: 100%;
            border-left: 1px solid black;
            line-height: 30px;
            text-align: center;
        }

        .data {
            width: 100%;
        }

        .data p {
            border-top: 1px solid #000;
            background-color: aliceblue;
        }

        .data p span {
            display: inline-block;
            width: 139px;
            height: 100%;
            border-left: 1px solid black;
            line-height: 30px;
            text-align: center;
        }

        a {
            display: inline-block;
            width: 40px;
            height: 25px;
            margin-left: 5px;
        }
    </style>
</head>

<body>
    <div class="bigbox">
        <p>首页</p>
        <a href="adddata.html">新增</a>
        <div class="header">
            <span>序号</span><span>名称</span><span>价格</span><span>描述</span><span>操作</span>
        </div>
        <div class="data">
            <!-- <p>
                <span class="data1">${v[i].id}</span>
                <span class="data2">${v[i].mz}</span>
                <span class="data3">${v[i].jg}</span>
                <span class="data4">${v[i].js}</span>
                <span class="data5">
                    <a href="./redact.html?pid=${v[i].id}" >修改</a>
                    <button data-id='${v[i].id}'>删除</button>
                </span>
            </p> -->
        </div>
    </div>
    <script>
        let xh = document.querySelector('.data .data1');
        let mz = document.querySelector('.data .data2');
        let jg = document.querySelector('.data .data3');
        let js = document.querySelector('.data .data4');
        axios({
            method: "get",
            url: "http://localhost:3000/data",
        }).then((data) => {
            let v = data.data;
            console.log(v)
            for (let i = 0; i < v.length; i++) {
                let arr = `
                <p>
                    <span class="data1">${v[i].id}</span><span class="data2">${v[i].mz}</span><span class="data3">${v[i].jg}</span><span class="data4">${v[i].js}</span><span class="data5"><a href="./redact.html?pid=${v[i].id}" >修改</a><button data-id='${v[i].id}'>删除</button></span>
                </p>
                `
                document.querySelector('.data').innerHTML += arr;
            }
            let btn = document.querySelectorAll('button');
            btn.forEach(v => {
                v.onclick = function () {
                    let pid = this.getAttribute('data-id');
                    console.log(pid)
                    axios({
                        method: 'delete',
                        url: `http://localhost:3000/data/${pid}` //直接写ID即可
                    }).then((data) => {
                        this.parentNode.parentNode.remove();
                        alert('删除成功')
                    })
                }
            })
        })
    </script>
</body>
</html>